<template>
  <div class="payment-settings-page page-container">
    <!-- 内容区域 -->
    <div class="content">
      <div class="settings-section">
        <!-- 支付方式列表 -->
        <div class="payment-list">
          <!-- 支付宝设置 -->
          <div class="payment-item">
            <div class="payment-header">
              <div class="payment-info">
                <a-icon type="alipay-circle" class="payment-icon alipay" />
                <span class="payment-name">支付宝收款码</span>
              </div>
              <a-button type="link" @click="handleEdit('alipay')">
                {{ qrcodeMaps.alipay ? "修改" : "设置" }}
              </a-button>
            </div>
            <div class="qrcode-display">
              <template v-if="qrcodeMaps.alipay">
                <img :src="qrcodeMaps.alipay" alt="支付宝收款码" />
              </template>
              <div v-else class="empty-qrcode">
                <a-empty description="未设置收款码">
                  <a-button type="primary" @click="handleEdit('alipay')">
                    立即设置
                  </a-button>
                </a-empty>
              </div>
            </div>
          </div>

          <!-- 微信设置 -->
          <div class="payment-item">
            <div class="payment-header">
              <div class="payment-info">
                <a-icon type="wechat" class="payment-icon wechat" />
                <span class="payment-name">微信收款码</span>
              </div>
              <a-button type="link" @click="handleEdit('wechat')">
                {{ qrcodeMaps.wechat ? "修改" : "设置" }}
              </a-button>
            </div>
            <div class="qrcode-display">
              <template v-if="qrcodeMaps.wechat">
                <img :src="qrcodeMaps.wechat" alt="微信收款码" />
              </template>
              <div v-else class="empty-qrcode">
                <a-empty description="未设置收款码">
                  <a-button type="primary" @click="handleEdit('wechat')">
                    立即设置
                  </a-button>
                </a-empty>
              </div>
            </div>
          </div>
        </div>

        <!-- 使用说明 -->
        <div class="settings-tips">
          <h4>使用说明：</h4>
          <ul>
            <li>请上传清晰的收款二维码图片</li>
            <li>建议使用个人收款码，方便资金及时到账</li>
            <li>收款码信息请确保正确，避免资金损失</li>
            <li>如需修改收款码，可点击"修改"重新上传</li>
          </ul>
        </div>
      </div>
    </div>

    <!-- 上传弹窗 -->
    <a-modal
      v-model="uploadModalVisible"
      :title="`设置${currentPaymentName}收款码`"
      @ok="handleUpload"
      :confirmLoading="uploading"
    >
      <div class="qrcode-upload">
        <a-upload
          name="qrcode"
          list-type="picture-card"
          class="qrcode-uploader"
          :show-upload-list="false"
          :before-upload="beforeUpload"
          @change="handleChange"
        >
          <div v-if="!tempQRCode">
            <a-icon type="plus" />
            <div class="ant-upload-text">上传收款码</div>
          </div>
          <img v-else :src="tempQRCode" alt="收款码预览" style="width: 100%" />
        </a-upload>
        <div class="upload-tips">
          <p>支持 jpg/png 格式，大小不超过 2MB</p>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { Button, Icon, Modal, Upload, Empty, message } from "ant-design-vue";

export default {
  name: "PaymentSettings",
  components: {
    AButton: Button,
    AIcon: Icon,
    AModal: Modal,
    AUpload: Upload,
    AEmpty: Empty,
  },
  data() {
    return {
      uploadModalVisible: false,
      uploading: false,
      currentPaymentType: "",
      tempQRCode: "",
      qrcodeMaps: {
        alipay: "",
        wechat: "",
      },
    };
  },
  computed: {
    currentPaymentName() {
      return this.currentPaymentType === "alipay" ? "支付宝" : "微信";
    },
  },
  methods: {
    goBack() {
      this.$router.push("/user/withdraw");
    },
    handleEdit(type) {
      this.currentPaymentType = type;
      this.tempQRCode = "";
      this.uploadModalVisible = true;
    },
    beforeUpload(file) {
      const isImage = file.type.startsWith("image/");
      if (!isImage) {
        message.error("只能上传图片文件！");
        return false;
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        message.error("图片必须小于 2MB！");
        return false;
      }
      return false;
    },
    handleChange(info) {
      if (info.file.status !== "uploading") {
        const reader = new FileReader();
        reader.onload = (e) => {
          this.tempQRCode = e.target.result;
        };
        reader.readAsDataURL(info.file.originFileObj);
      }
    },
    async handleUpload() {
      if (!this.tempQRCode) {
        message.warning("请先上传收款码");
        return;
      }

      this.uploading = true;
      try {
        // 模拟上传
        await new Promise((resolve) => setTimeout(resolve, 1000));
        this.qrcodeMaps[this.currentPaymentType] = this.tempQRCode;
        message.success("收款码设置成功");
        this.uploadModalVisible = false;
      } catch (error) {
        message.error("收款码设置失败");
      } finally {
        this.uploading = false;
        this.tempQRCode = "";
      }
    },
  },
};
</script>

<style lang="less" scoped>
.payment-settings-page {
  height: 100vh;
  background: #f5f7fa;
  overflow: hidden;

  .payment-wrapper {
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;

    .header {
      position: sticky;
      top: 0;
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 16px;
      height: 56px;
      background: #fff;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);

      .header-left {
        display: flex;
        align-items: center;
        cursor: pointer;

        .anticon {
          font-size: 16px;
          margin-right: 4px;
        }

        span {
          font-size: 14px;
          color: #333;
        }
      }

      .title {
        font-size: 16px;
        font-weight: 500;
        color: #262626;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
      }
    }

    .content {
      padding: 16px;

      .settings-section {
        background: #fff;
        border-radius: 8px;
        padding: 20px;

        .payment-list {
          .payment-item {
            &:not(:last-child) {
              margin-bottom: 24px;
              padding-bottom: 24px;
              border-bottom: 1px solid #f0f0f0;
            }

            .payment-header {
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-bottom: 16px;

              .payment-info {
                display: flex;
                align-items: center;
                gap: 8px;

                .payment-icon {
                  font-size: 24px;

                  &.alipay {
                    color: #1677ff;
                  }

                  &.wechat {
                    color: #07c160;
                  }
                }

                .payment-name {
                  font-size: 16px;
                  font-weight: 500;
                }
              }
            }

            .qrcode-display {
              text-align: center;

              img {
                max-width: 200px;
                max-height: 200px;
                border: 1px solid #f0f0f0;
                border-radius: 8px;
                padding: 8px;
              }

              .empty-qrcode {
                padding: 32px 0;
              }
            }
          }
        }

        .settings-tips {
          margin-top: 24px;
          padding-top: 16px;
          border-top: 1px dashed #f0f0f0;

          h4 {
            color: #8c8c8c;
            font-size: 14px;
            margin-bottom: 8px;
          }

          ul {
            padding-left: 20px;
            margin: 0;

            li {
              color: #8c8c8c;
              font-size: 12px;
              line-height: 1.8;
            }
          }
        }
      }
    }
  }
}

.qrcode-upload {
  text-align: center;

  :deep(.ant-upload-picture-card-wrapper) {
    width: 200px;
    margin: 0 auto;
  }

  .upload-tips {
    margin-top: 12px;
    color: #8c8c8c;
    font-size: 12px;
  }
}

@media screen and (max-width: 768px) {
  .payment-settings-page {
    .payment-wrapper {
      .header {
        height: 48px;
        padding: 0 12px;
      }

      .content {
        padding: 12px;

        .settings-section {
          padding: 16px;
        }
      }
    }
  }
}
</style>
